<template>
	<view class="content">
		<view class="content_image">
			<image src="@/static/icos/hot.png" mode="aspectFill"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info" v-if="userinfo">
				<image :src="userinfo.avatarUrl" mode=""></image>
				<view class="username">
					{{userinfo.nickName}}
				</view>
				<view>
					我的积分:{{userinfo.integral}}
				</view>
				<!-- 				<view class="select">
					<view>收藏店铺 12</view>
					<view @click="myCollect">收藏商品 ({{collectNum}})</view>
				</view> -->
			</view>
			<view v-else class="noLogin">
				<image src="@/static/icos/hot.png" mode="widthFix" @click="login"></image>
				<view class="">点击图片登录</view>
			</view>
			<!--  -->
			<view class="my_order">
				<view class="my_order_title">
					我的订单
				</view>
				<view class="my_order_item" v-for="item in list">
					<view class="my_order_content" @click="go(item)">
						<image :src="item.url" mode="widthFix"></image>
						<view class="">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="other">
				<!-- @click="addAdress" -->
				<view class="other_addres" @click="gotoDetail()">
					<view>个人信息</view>
					<image src="@/static/icos/hot.png" mode="widthFix"></image>
				</view>
				<view class="other_our" @click="gotoFeedBack()">
					<view>联系我们</view>
					<image src="@/static/icos/hot.png" mode="widthFix"></image>
				</view>
				<view class="other_our" @click="gotoChangeResult">
					<view>答题记录</view>
					<image src="@/static/icos/hot.png" mode="widthFix"></image>
				</view>
				<view class="other_our" @click="logout">
					<view>退出登录</view>
					<image src="@/static/icos/hot.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
						id: 1,
						url: '../../static/icos/hot.png',
						name: "全部订单",
						path: '/pages/order/allorders/allorders'
					},
					{
						id: 2,
						url: '../../static/icos/hot.png',
						name: "待付款",
						path: '/pages/order/uncertain/uncertain'
					},
					{
						id: 3,
						url: '../../static/icos/hot.png',
						name: "待发货",
						path: ''
					},
					{
						id: 4,
						url: '../../static/icos/hot.png',
						name: "退款",
						path: '/pages/order/return/return'
					}
				],
				url: '',
				userinfo: [],
				collectNum: 0
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('user')
		},
		methods: {
			go(item) {
				console.log(item.path)
				uni.navigateTo({
					url: item.path
				})
			},
			gotoChangeResult() {
				uni.navigateTo({
					url: '/pages/changeresult/changeresult'
				})
			},
			gotoDetail() {
				uni.navigateTo({
					url: '/pages/info/info'
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '您确定要退出吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.removeStorageSync('user')
							// uni.clearStorage()
							uni.reLaunch({
								url: '/pages/center/center'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			gotoFeedBack() {
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			}
			// 添加地址
			// addAdress() {
			// 	uni.chooseAddress({
			// 		success(res) {
			// 			console.log(res)
			// 			uni.setStorageSync("address", res);
			// 		}
			// 	})
			// },
			// myCollect() {
			// 	uni.navigateTo({
			// 		url: '/pages/myCollect/myCollect'
			// 	})
			// }
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.content_image {
		image {
			// 高斯模糊
			filter: blur(3rpx);
			width: 100%;
		}

		height: 300rpx;
		position: relative;
	}

	.content_botton {
		.noLogin {
			position: absolute;
			left: 45%;
			transform: translate(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.content_info {
			position: relative;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;

			image {
				margin-top: -40rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.username {}

			.select {
				display: flex;
				justify-content: space-between;

				view {
					padding: 0 40rpx;
				}
			}
		}

		.my_order {
			width: 90%;
			margin-top: 10rpx;
			margin-left: 5%;
			height: 280rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.my_order_title {
				border-radius: 20rpx;
				padding-left: 20rpx;
				line-height: 80rpx;
				height: 80rpx;
			}

			.my_order_item {
				padding: 3%;
				float: left;

				.my_order_content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	.other {
		margin: 10rpx 40rpx;
		height: 500rpx;
		width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_our {
			height: 60rpx;
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}
</style>